{% block sw_theme_modal %}
    <sw-modal
        class="sw-theme-modal"
        @modal-close="closeModal"
        :title="$t('sw-theme-manager.themeModal.modalTitle')"
        :subtitle="$t('sw-theme-manager.themeModal.modalSubtitle')"
    >

        {% block sw_theme_modal_header %}
            <div class="sw-theme-modal__header">
                <sw-card-section class="sw-theme-modal__header-search">
                    <sw-container>
                        <sw-simple-search-field
                            class="sw-theme-modal__header-search"
                            variant="form"
                            :placeholder="$t('sw-theme-manager.general.placeholderSearchBar')"
                            @search-term-change="onSearch"
                        ></sw-simple-search-field>
                    </sw-container>
                </sw-card-section>
            </div>
        {% endblock %}

        {% block sw_theme_modal_content %}
            <div class="sw-theme-modal__content">
                {% block sw_theme_modal_loader %}
                    <sw-loader v-if="isLoading"></sw-loader>
                {% endblock %}

                {% block sw_theme_modal_content %}
                    <sw-container v-else columns="repeat(auto-fill, minmax(250px, 1fr))" gap="24px">
                        {% block sw_theme_modal_content_listing %}
                            <div v-for="theme in themes" class="sw-theme-modal__content-item" :class="{ 'is--selected': theme.id === selected }">
                                {% block sw_theme_modal_content_listing_item %}

                                    {% block sw_theme_modal_content_listing_item_checkbox %}
                                        <mt-checkbox @update:checked="onSelection(theme.id)" :checked="theme.id === selected" />
                                    {% endblock %}

                                    {% block sw_theme_modal_content_listing_item_inner %}
                                        <sw-theme-list-item
                                            :theme="theme"
                                            :key="theme.id"
                                            @item-click="selectItem(theme.id)">
                                        </sw-theme-list-item>
                                    {% endblock %}

                                {% endblock %}
                            </div>
                        {% endblock %}
                    </sw-container>
                {% endblock %}
            </div>
        {% endblock %}

        {% block sw_theme_modal_footer %}
            <template #modal-footer>
                <sw-button @click="closeModal">
                    {{ $t('global.default.cancel') }}
                </sw-button>
                <sw-button @click="selectLayout" variant="primary">
                    {{ $t('sw-theme-manager.themeModal.actionConfirm') }}
                </sw-button>
            </template>
        {% endblock %}

    </sw-modal>
{% endblock %}
